<script>
import request from "@/common/request";
import {baseUrl} from "@/common/api";

export default {
  name: "order-detail",
  data(){
    return{
      sn:'',
      orderDetail:{}
    }
  },
  onLoad(query) {
    this.sn = query.sn;
    this.detauil();
  },
  methods: {
    detauil(){
      request({
        url:'/d/order/detail2',
        data:{
          orderSn:this.sn

        }
      }).then(res=>{
        this.orderDetail =  res.data;
      })
    },
    edit(){
      const upload = (file) => {
        return new Promise(resolve => {
          uni.uploadFile({
            url:baseUrl+'/common/upload?token='+uni.getStorageSync('token'),
            method:'POST',
            name: 'file',
            filePath:file,
            data:{
              token:uni.getStorageSync('token'),
              filePath:file,
            },
            success:(res)=>{
              resolve((JSON.parse(res.data).data.fullurl))
            }
          })
        })
      }
      uni.chooseImage({
        success:async (result) => {
          console.log(result)
          let urls = [];
          for (let i = 0; i < result.tempFilePaths.length; i++) {
            urls.push(await upload(result.tempFilePaths[i]));
          }
         this.orderDetail.hdimages = urls;
          request({
            url:'/d/order/changeHd',
            method:'post',
            data:{
              hdimages:urls.join(',')
            },
          }).then(()=>{
            uni.showToast({
              title:'修改完成',
              icon:'none'
            })
          })
        }
      })
    },
    //复制
    copy(){
      uni.setClipboardData({
        data: this.orderDetail.order_sn,
        success: function () {
          uni.showToast({
            title:'复制成功',
            icon:'none'
          })
        }
      })
    },
  },
}
</script>

<template>
    <view class="detail">
      <text class="state">{{orderDetail.statusDesc}}</text>
      <view  class="pzhd">
        <view class="title">
          <text>拍照回单</text>
        </view>
        <view class="imgs">
          <image :src="item" v-for="item in orderDetail.hdimages" mode="widthFix"></image>
        </view>
        <view class="btn" @click="edit">修改回单</view>
      </view>
      <view class="xclx">
        <view class="title">
          <text>行程路线</text>
        </view>
        <view class="lc">
          <view class="addr">
            <view class="flag"></view>
            <view class="info">
              <view class="info1">
                <text>{{orderDetail.start_addr}}</text>
              </view>
              <view class="info2" v-if="false">
                <text>重庆重庆市-渝北区</text>
              </view>
            </view>
          </view>
          <view class="addr">
            <view class="flag flag2"></view>
            <view class="info">
              <view class="info1">
                <text>{{orderDetail.end_addr}}</text>
              </view>
              <view class="info2" v-if="false">
                <text>重庆重庆市-渝北区</text>
              </view>
            </view>
          </view>
        </view>
        <view class="bh">
          <view class="left">
            <text>订单编号</text>
          </view>
          <view class="right">
            <text class="text1">{{orderDetail.order_sn}}</text>
            <text class="text2" @tap="copy()">复制</text>
          </view>
        </view>
        <view class="time">
          <view class="left">
            <text>订单时间</text>
          </view>
          <view class="right">
            <text>{{orderDetail.createtime}}</text>
          </view>
        </view>
      </view>
      <view class="yser">
        <text>客户需求</text>
        <view>
          <text>需要车型</text>
          <text>{{orderDetail.car.carType||'未知'}}</text>
        </view>
        <view>
          <text>付款信息</text>
          <text>订单已预付</text>
        </view>
      </view>
      <view class="yser">
        <text>收入清单</text>
        <view>
          <text>客户已支付</text>
          <text>{{orderDetail.total}}</text>
        </view>
        <view class="price">
          <text>总计</text>
          <text>{{orderDetail.total}}元</text>
        </view>
      </view>
    </view>
</template>

<style scoped lang="scss">
view,text{
  box-sizing: border-box;
}
.detail{
  width: 100vw;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  .pzhd{
    margin: 20rpx;
    background-color: #fff;
    padding: 20rpx 20rpx 30rpx;
    border-radius: 20rpx;
    .btn{
      width: 517rpx;
      height: 72rpx;
      background: #FFFFFA;
      border-radius: 10rpx;
      border: 1px solid #FE4B4B;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      font-weight: 400;
      font-size: 26rpx;
      color: #FE4B4B;
    }
    .title{
      line-height: 50rpx;
      font-size: $uni-font-size-lg;
      font-weight: bold;
    }
    .imgs{
      margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      image{
        width: 150rpx;
        margin-bottom: 20rpx;
        margin-right: 10rpx;
        border-radius: 20rpx;
      }
    }
  }

  .yser{
    //height: 213rpx;
    margin: 0 15rpx;
    background: #FFFFFF;
    padding: 30rpx 20rpx;
    display: flex;
    margin-bottom: 30rpx;
    flex-direction: column;
    border-radius: 16rpx;
    .price{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 30rpx;
      border-top: 1px solid #f2f2f2;
      text:last-child{
        font-weight: 500;
        font-size: 36rpx;
        color: #222222;
      }

      text:first-child{
        font-weight: 500;
        font-size: 36rpx;
        color: #222222;
      }
    }
    view{
      display: flex;
      align-items: center;
      margin-bottom: 36rpx;
      text:last-child{
        font-weight: 500;
        font-size: 26rpx;
        margin-left: 50rpx;
        color: #222222;
      }
      text:first-child{
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
      }
      &:last-child{
        margin-bottom: unset;
      }
    }
    >text{
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      margin-bottom: 30rpx;
    }
  }
  .xclx{
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .title{
      line-height: 50rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #FAFAFA;
      font-size: $uni-font-size-lg;
      font-weight: bold;
    }
    .lc{
      padding-left: 20rpx;
      padding-bottom: 60rpx;
      border-bottom: 1rpx solid #FAFAFA;
      .addr{
        margin-top: 30rpx;
        display: flex;
        .flag{
          margin-top: 10rpx;
          width: 15rpx;
          height: 15rpx;
          border-radius: 50%;
          background-color: #00AF59;
        }
        .flag2{
          background-color: #FF4656;
        }
        .info{
          margin-left: 20rpx;
          line-height: 35rpx;
          .info1{

          }
          .info2{
            margin-top: 10rpx;
            color: #666;
          }
        }
      }
    }
    .bh{
      margin-top: 30rpx;
      line-height: 40rpx;
      display: flex;
      .left{
        color: #666;
      }
      .right{
        margin-left: auto;
        .text1{
          font-size: $uni-font-size-sm;
        }
        .text2{
          margin-left: 20rpx;
          color: #F35C5A;
        }
      }
    }
    .time{
      margin-top: 30rpx;
      line-height: 40rpx;
      display: flex;
      .left{
        color: #666;
      }
      .right{
        margin-left: auto;
      }
    }
  }


  .state{
    height: 130rpx;
    width: 100%;
    padding-left: 40rpx;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 40rpx;
    color: #222222;
  }
}
</style>
